
<template>
    <div>
        <nav class="navbar nav-dark bg-primary justify-content-betewwn mb-4 px-4">
            <router-link class="navbar-brand" to="/">专栏</router-link>
            <ul v-if="!user.isLogin" class="list-inline mb-0">
                <li class="list-inline-item"><router-link to="/login" class="btn btn-outline-light my-2" href="#">登录</router-link></li>
                <li class="list-inline-item"><router-link to="/register" class="btn btn-outline-light my-2" href="#">注册</router-link></li>
            </ul>
            <ul v-else class="list-inline mb-0">
                <!-- <li class="list-inline-item"><a class="btn btn-outline-light my-2" href="#">你好{{ user.name }}</a></li> -->
                <drop-down :title="`你好${user.nickName}`">
                    <dropdown-item>
                        <router-link to="/create" class="dropdown-item">新建文档</router-link>
                    </dropdown-item>
                    <dropdown-item>
                        <a href="" class="dropdown-item">修改资料</a>
                    </dropdown-item>
                    <dropdown-item>
                        <a href="" class="dropdown-item">退出登录</a>
                    </dropdown-item>
                </drop-down>
            </ul>
        </nav>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import DropDown from './DropDown.vue'
import DropdownItem from './DropdownItem.vue'
import { UserProps } from '@/store'

// export interface UserProps {
//     isLogin: boolean,
//     name?: string,
//     id?: number
// }

export default defineComponent({
    name: 'GlobalHeader',
    props: {
        user:{
            type: Object as PropType<UserProps>,
            required: true
        }
    },
    components: {
        DropDown,
        DropdownItem
    },
    setup() {
        return{

        }
    }
})
</script>
